<template>
	<view>
        <view class="center container-ask-detail">

            <view class="row">
                <!--问-->
                <view class="ask-w">
                    <view class="ask-wtop">
                        <view class="ask-wlogo">
                            <!-- <img src="@/static/img00/dian.png" alt=""> -->
                        </view>
                        <p>{{info.question}}</p>
                    </view>

                    <view class="ask-wcont">
                        <view class="ask-wcont-field">
                            <span>{{info.kehu}}</span>
                            <span></span>
                            <span style="float: right;">{{info.udate}}</span>
                        </view>
                    </view>
                </view>
            </view>
<!-- <popThree></popThree> -->
            <view class="row">
                <!--答案-->
                <view class="ask-d">
                    <view class="ask-dtop">
                        <view class="message">
                            <view class="pic">
                                <img :src="cou_info.image">
                            </view>
                            <view class="message-des">
                                <view class="name-school">
                                    <span class="name">{{cou_info.name}}</span>
                                    <span class="school">{{cou_info.school}}</span>
                                </view>
                                <view class="number">
                                    <span> 咨询人数 <i>{{cou_info.clients}}人</i> </span>
                                    <span> 考察楼盘 <i>{{cou_info.survey}}次</i> </span>
                                </view>
                            </view>
                        </view>
                        <view class="mes-tw" @click="open({
								type:'counselor',
								msg:'向他咨询',
								title:'向他咨询'
							})"> 免费提问 </view>
                    </view>

                    <view class="ask-logo-wcont">
                        <view class="ask-dlogo">
                            <!-- <img src="@/static/img00/dian.png" alt=""> -->
                        </view>
                        <view class="ask-wcont">
                            <p>{{info.ask}}</p>
                        </view>

                        <view class="time">{{info.udate}}</view>
                    </view>   
                </view>       
            </view>

            <view class="row row-ask">
                <view class="go-ask">
                    <p>立即提问，得到专业咨询师1对1的解答</p>
                    <view class="btn-area">
                        <button class="btn btn-consult">咨询热线</button>
                        <button type="button" class="btn btn-find " @click="open2({
								type:'tiwen',
								msg:'买房问问-我要提问'
							})">留言提问</button>

                    </view>
                </view>
            </view>

             <view v-if="lou_res.length > 0" class="row row-ask">
                <view class="go-ask">
                    <view class="hd">
                        <h2>此问答相关楼盘</h2>
                    </view>

                    <recommend :jdata="lou_res"></recommend>

                </view>
            </view>

			
            <!-- 弹框 -->
			<!-- <button @click="open">打开弹窗</button>-->
			<!-- 
			<uni-popup ref="popup" type="center">
				<p class="qwe">底部弹出 Popup</p>   
			</uni-popup>  
			-->
					
			<uni-popup ref="popup" type="center">
			    <view class="pop-content">
			        <view class="pop-zxs-intr-v3">
			            <view @click="close()" class="pop-shut"></view>
			            <view class="pop-zxs-pic">
			                <img :src="pop_three.image" :alt="pop_three.name">
			            </view>
			            <view class="pop-zxs-txt">
			                <h5>{{pop_three.name}}</h5>
			                <p>已为<span>{{pop_three.clients}}</span>人解答过问题</p>
			            </view>
			            <view class="pop-text">
			                <p class="pop-text-p1">买房政策、房源信息、楼盘分析</p>
			                <p>有问题，他将在第一时间为您解答！ </p>
			            </view>
			             <view class="pop-phone">
			                <input @input="onKeyInput2" :value="mobile" type="pop-text" placeholder="请输入订阅手机号" >
			            </view>
			            <button class="pop-btn-area"  @click="expert">确定</button>
			        </view>
			    </view>   
			</uni-popup> 
			
			
			<uni-popup ref="popup2" type="center">
				<view class="pop3-content">
					<view @click="close1()" class="pop3-shut"></view>
	
					<view class="pop3-title">
						<h2>我要提问</h2>
					</view>
	
					<view class="pop3-text">
						<textarea @input="onKeyInput" :value="textarea" placeholder="写下问题, 将有专业咨询师为您解答" rows="10" cols="30"></textarea>
					</view>
						   
					<view class="pop3-phone">
						<input @input="onKeyInput2" :value="mobile" type="text" placeholder="请输入订阅手机号">
					</view>
	
					<button @click="expert2()" class="pop3-btn-area" >确定</button>
	
				</view>   
			</uni-popup>
			
			
        </view>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	
    import recommend from 'pages/index/recommend';
	export default {
        components: {
            recommend,
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
        },
		data() {
			return {
				id:0,
				info:{},
				cou_info:{},
				lou_res:{},
				//弹窗
				param:{},
				pop_three:{},//弹窗3
				mobile:'',
				textarea:''
			}
		},
		onLoad(e) {
			let _this = this;
			this.id = e.id;
			this.$api.getNewsDetailTwo({
					id:_this.id
				},
				res => {
					// console.log(res);
					_this.info = res.info;
					_this.cou_info = res.cou_info;
					_this.pop_three = res.cou_info;
					_this.lou_res = res.lou_res;
					console.log(_this.pop_three);
				}
			);
		},
		methods: {
			open(data){
			  this.param ={
				'type': data.type,
				'msg': data.msg,
			  };
			    this.$refs.popup.open()
			},
			open2(data){
				// console.log(data);
				this.pop_title = data.title;
				this.pop_text = data.text;
				this.param ={
					'type': data.type,
					'msg': data.msg
				};
			    this.$refs.popup2.open();
			},
			close(){
			     this.$refs.popup.close()
			},
			
			close1(){
			    this.$refs.popup2.close()
			},
			onKeyInput: function(event) {
				this.textarea = event.target.value
			},
			onKeyInput2: function(event) {
				this.mobile = event.target.value
			},
			expert(){
				//提交
				let _this = this;
				let mobile = this.mobile;
				if(mobile == ''){
					uni.showToast({
					    title: '手机号码不能为空',
					    duration: 2000,
						icon:'none'
					});
					return false;
				}
				
				var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				if (!myreg.test(mobile)) {
					uni.showToast({
					    title: '请输入正确的手机号',
					    duration: 2000,
						icon:'none'
					});
					return false;
				}
				this.param.mobile = mobile;
				// this.param.loupan_res = this.info;
				this.param.counselor_id = this.pop_three.id;
					
				
				this.$api.pushAjaxSubmit({
						param:_this.param
					},
					res => {
							if(res.code == 1){
								uni.showToast({
								    title: res.msg,
								    duration: 2000
								});
							}else{
								uni.showToast({
								    title: res.msg,
								    duration: 2000,
									icon:'none'
								});
							}
						_this.$refs.popup.close()
					}
				);
			},
			
			expert2(){
				//提交
				let _this = this;
				let mobile = this.mobile;
				if(mobile == ''){
					uni.showToast({
					    title: '手机号码不能为空',
					    duration: 2000,
						icon:'none'
					});
					return false;
				}
				
				var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				if (!myreg.test(mobile)) {
					uni.showToast({
					    title: '请输入正确的手机号',
					    duration: 2000,
						icon:'none'
					});
					return false;
				}
				this.param.mobile = mobile;
				this.param.tiwen = this.textarea;
				
				this.$api.pushAjaxSubmit({
						param:_this.param
					},
					res => {
							if(res.code == 1){
								uni.showToast({
								    title: res.msg,
								    duration: 2000
								});
							}else{
								uni.showToast({
								    title: res.msg,
								    duration: 2000,
									icon:'none'
								});
							}
						_this.$refs.popup2.close()
					}
				);
			},
			
		}
	}
</script>

<style scoped>
/* .qwe{
    color: red;
    background: #FFF;
    height: 20rem;
    width: 20rem;
} */
    .row{
        background: #fff;
        margin-top: 20upx;
    }
    .ask-w,.ask-d{
        margin:0 40upx 0 40upx;
        padding: 40upx 0 40upx 0;
    }
    .ask-wtop>p{
        font-size: 32upx;
        font-weight: 550;
        margin-left: 70upx;
        line-height: 50upx;

    }
    .ask-wlogo{
       width: 50upx;
       height: 50upx;
       float: left;
    }
    .ask-wlogo>img{
        width: 100%;
        height: 100%;
    }
    .ask-wcont-field>span{
        color: #77808a;
        font-size: 24upx;
    }
    .ask-dtop{
        display: flex;
        padding-bottom: 30upx;
        border-bottom: .5px solid #e2e9f0;
    }

    .pic{
        height: 80upx;
        width: 80upx;
        float: left;
    }
    .pic>img{
        height: 80upx;
        width: 80upx;
        border-radius: 50%;
    }
    .message{
        float: left;
    }
    .message-des{
        height: 80upx;
        width: 410upx;
        margin-left: 100upx;
        font-size: 24upx;
        line-height: 40upx;
    }
    .name{
        font-size: 28upx;
        color: #3e4a59;
    }
    .school{
        margin-left: 20upx;
        color: #77808a;
    }
    .number{
        margin-right: 5upx;
    }
    .number>span>i{
        margin-left: 10upx;
        margin: 0 10upx 0 10upx;
        font-style: normal;
        color: #ff6e72;
    }
    .mes-tw{
        height: 56upx;
        width: 150upx;
        margin-top: 25upx;
        background: #e3f6fe;
        color: #13c3c3;
        text-align: center;
        line-height: 56upx;
        border-radius: 10upx;
    }

    .ask-logo-wcont{
        margin-top: 20upx;
    }
    .ask-dlogo{
        height: 48upx;
        width: 48upx;
        float: left;
    }
    .ask-dlogo>img{
        height: 100%;
        width: 100%;
    }
    .ask-wcont{
        line-height: 48upx;
        margin-left: 70upx;
    }
    .time{
        margin-top: 30upx;
        margin-left: 80upx;
        font-size: 24upx;
        color: #77808a;
    }   
    .go-ask{
        padding: 52upx 32upx;
    }
    .go-ask>p{
         text-align: center;
    }
    
    .btn{
        height: 80upx;
        width: 320upx;
        color: #fff;
        margin-top: 40upx;
        border-radius: 10upx;
        font-size: 30upx;
    }
    .btn-consult{
        background: #13c3c3;
    }
    .btn-find{
        background: #fa5f35;
         margin-left: 40upx;
    }
	
	
	
	
	
	
	/* pop three */
		.pop-shut{
	        height: 32upx;
	        width: 32upx;
	        position: relative;
	        top:-30upx;
	        left: 560upx;
	        background: url("../../../static/img00/shut.png") no-repeat;
	        background-size: 100% 100%;
	    }
		.pop-content{  
	
	        background: #fff;
	        border-radius: 10upx;
	        display: flex;
	    } 
	
	    .pop-zxs-intr-v3{
	        padding: 50upx 60upx 50upx 60upx;
	        margin: 0 auto;
	
	    }
	    .pop-zxs-pic{
	        height: 120upx;
	        width: 120upx;  
	        float: left;
	    }
	    .pop-zxs-pic>img{
	        height: 100%;
	        width: 100%;
	        border-radius: 50%;
	    }
	
	    .pop-zxs-txt{
	        height: 120upx;
	        margin-left: 140upx;
	        line-height: 60upx;
	       
	    }
	    .pop-zxs-txt>h5{
	        font-size: 32upx;
	    }
	    .zxs-txt>p{
	        font-size: 28upx;
	        color: #77808a;
	    }
	    .pop-zxs-txt>p>span{
	        color: #13c3c3;
	    }
	    .pop-text{
	        margin-top: 50upx;
	        margin-bottom: 80upx;
	    }
	    .pop-text>p{
	        width: 500upx;
	        overflow: hidden;
	        text-overflow:ellipsis;
	        white-space: nowrap;
	    }
	    .pop-text-p1{
	        margin-left: 20upx;
	        margin-right: 40upx;
	    }
	    .pop-phone{
	        border: 1upx solid #cdd7e1;
	        border-radius: 10upx;
	    }
	    .pop-phone>input{
	        padding: 0 30upx;
			border: 1px solid #E3E3E3;
	    }
	    input{
	        height: 86upx;
	    }
		.pop-btn-area{
	        margin-top: 80upx;
	        margin-bottom: 30upx;
	        background: #13c3c3;
	        color: #fff;
	    }
		.pop-expert2-popup{
	        width: 510upx;
	        height: 240upx;
	        background: #fff;
	        border-radius: 10upx;
	    }
	    .pop-expert2-popup-p{
	        height: 150upx;
	        text-align: center;
	        font-size: 28uxp;
	        color: #3e4a59;
	        line-height: 150upx;
	        border-bottom: 1upx solid rgb(195, 195, 195);
	    }
	    .pop-expert2-popup-shut{
	        text-align: center;
	        line-height: 90upx;
	        color: #47b3e3;
	    } 
	/* php three end */
	
	
	
	
	.popone-shut{
	        height: 32upx;
	        width: 32upx;
	        position: relative;
	        top:-30upx;
	        left: 480upx;
	        background: url("../../../static/img00/shut.png") no-repeat;
	        background-size: 100% 100%;
	    }
	    .popone-content{
	
	        margin-left: 10%;
	        margin-right: 10%;
	        background: #fff;
	        border-radius: 10upx;
	        display: flex;
	    }
	    .popone-bohu{
	        padding: 50upx 60upx 50upx 60upx;
	        margin: 0 auto;
	        align-self: center;
	    }
	
	    .popone-title{
	        font-size: 40upx;
	        font-weight: 550;
	        color: #3e4a59;
	        text-align: center;
	    }
	    .popone-text{
	        margin:30upx 0 50upx 0;
	        text-align: center;
			color: #000000;
			line-height: 60rpx;
			font-weight: 500;
	    }
	    .popone-phone{
	        border: 1upx solid #cdd7e1;
	        border-radius: 10upx;
	    }
	    .popone-phone>input{
	        padding: 0 30upx;
			color: #000000;
			font-weight: 500;
			border:1px solid #CCCCCC;
	    }
	    input{
	        height: 86upx;
	    }
	    .popone-btn-area{
	        margin-top: 30upx;
	        background: #13c3c3;
	        color: #fff;
	    }
	
	    .popone-expert2-popup{
	        width: 510upx;
	        height: 240upx;
	        background: #fff;
	        border-radius: 10upx;
	    }
	    .popone-expert2-popup-p{
	        height: 150upx;
	        text-align: center;
	        font-size: 28uxp;
	        color: #3e4a59;
	        line-height: 150upx;
	        border-bottom: 1upx solid rgb(195, 195, 195);
	    }
	    .popone-expert2-popup-shut{
	        text-align: center;
	        line-height: 90upx;
	        color: #47b3e3;
	    }
	
	
	
	
	
	 .pop3-shut{
	        height: 32upx;
	        width: 32upx;
	        position: relative;
	        top:30upx;
	        left: 580upx;
	        background: url("../../../static/img00/shut.png") no-repeat;
	        background-size: 100% 100%;
	    }
	
		.pop3-content button{
	        height: 86upx;
	        width: 300upx;
	        background-color: #13c3c3;
	        border-radius: 10upx;
	        color: #fff;
	    }
	
	    .pop3-content{
	        background: #fff;
	        border-radius: 10upx;
	        padding-bottom: 80upx;
	    }
	
	    .pop3-title{
	        padding-top: 60upx;
	        text-align: center;
	    }
	    .pop3-text{
	        background: #f3f6f9;
	        margin-top: 30upx;
	        margin-left: 10%;
	        margin-right: 10%;
	        border-radius: 10upx;
	    }
	    .pop3-content textarea{
	        padding: 20upx;
	        font-size: 28upx;
	    }
	
	    .pop3-phone{
	        background: #f3f6f9;
	        margin-top: 30upx;
	        margin-left: 10%;
	        margin-right: 10%;
	        border-radius: 10upx;
	    }
	    .pop3-phone>input{
	        padding: 0 20upx;
	        height: 86upx;
	        
	    }
	
	    .pop3-btn-area{
	        width: 80%;
	        margin-top:50upx;
	        background: #13c3c3;
	        color: #fff;
	    }
	
	 .pop3-expert2-popup{
	        width: 510upx;
	        height: 240upx;
	        background: #fff;
	        border-radius: 10upx;
	    }
	    .pop3-expert2-popup-p{
	        height: 150upx;
	        text-align: center;
	        font-size: 28uxp;
	        color: #3e4a59;
	        line-height: 150upx;
	        border-bottom: 1upx solid rgb(195, 195, 195);
	    }
	    .pop3-expert2-popup-shut{
	        text-align: center;
	        line-height: 90upx;
	        color: #47b3e3;
	    }
	
	
</style>
